<script setup lang="ts">
// 不设置默认值
// const props = defineProps<{
//   name: string
//   age?: number
//   male: boolean
// }>()

// 设置默认值
const props = withDefaults(
  defineProps<{
    name?: string
    age?: number
    male?: boolean
  }>(),
  { name: 'rose', age: 18, male: false },
)
// 代码中要使用 props 的数据需要点出来
console.log(props)
</script>

<template>
  <div>
    <h2>我是子组件</h2>
    <!-- props 定义的数据,子组件的结构中可以直接使用,不需要用 props 点出来 -->
    <p>{{ name }}</p>
    <p>{{ age }}</p>
    <p>{{ male }}</p>
  </div>
</template>

<style scoped>
div {
  width: 200px;
  height: 200px;
  background-color: skyblue;
}
</style>
